﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>看板</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/scanboard.css" />
<link rel="stylesheet" type="text/css" href="css/animsition.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.shCircleLoader.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.shCircleLoader-min.js"></script>
</head>
<body>

	<!--Top Start!-->
	<div class="scanboardWp animsition">
		<div id="top">
			<div class="wp clearfix">
				<div class="left pageTit">
					<a class="summaryBtn" href="javascript:;">青岛云平台</a>
				</div>
				<div class="center topLogo">
					<a href="#">智能云民爆物品末端管控平台</a>

				</div>
				<div class="right topBar">
					<div class="topTime">2021-10-14  星期四  10:17:18</div>
					<div class="clearfix">
						<a href="javascript:;" class="signOut fr">退出</a>
					</div>
				</div>

				<div style="background: url(images/headIcon.gif) no-repeat center center;background-size: 100%;height: 131px;z-index: 99999;width: 78%;margin: 0 auto;margin-top: 12px;"></div>

			</div>

		</div>
		<!--Top End!-->



		<!--Main Start!-->
		<div id="main" class="wp clearfix">
			<div class="left">
				<div class="item waybill" style="box-shadow: inset 0 0 30px #07417a;">
					<div class="itemTit">
						<span class="border-yellow">今日使用数量</span>
					</div>
					<div class="itemCon itembg">
						<div class="progress">
                          <h3 class="clearfix"><span>工地</span> <i id="jinri_by1" style="color: #1eb6fe !important;">80个</i></h3>
                          <div class="progressBar"><span id="jinri_by2" style="width: 80%;" class="bar1"></span></div>
                          <span id="jinri_by3" class="prospan" style="color:#fff;">80%</span>
                      </div>
                      <div class="progress" progress="80%">
                          <h3 class="clearfix"><span>炸药</span> <i id="jinri_zy1" style="color: #ffd220 !important;">1000/6000KG</i></h3>
                          <div class="progressBar"><span id="jinri_zy2" style="width: 15%;" class="bar2"></span></div>
                          <span id="jinri_zy3" class="prospan" style="color:#fff;">15%</span>
                      </div>
                      <div class="progress" progress="80%">
                          <h3 class="clearfix"><span>雷管</span> <i id="jinri_lg1" style="color: #ff0e0d !important;">50/1000发</i></h3>
                          <div class="progressBar"><span id="jinri_lg2" style="width: 5%;" class="bar3"></span></div>
                          <span id="jinri_lg3" class="prospan" style="color:#fff;">5%</span>
                      </div>
					</div>
				</div>

				<div class="item" style="box-shadow: inset 0 0 30px #07417a;">
					<div class="itemTit">
						<span class="border-green">全市最新的爆破数据</span>
					</div>
					<div class="itemCon">
						 <div>
                          <div style="height: 30px;border-bottom: 1px dashed #404040;">
                              <span style="width: 70%;height: 30px;line-height: 32px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;">项目工点</span>
                              <span style="width: 30%;height: 30px;line-height: 32px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;text-align:center;">爆破时间</span>
                          </div>
                          <div id="review_box" style="height: 162px;overflow: hidden;">
                              <ul id="comment1" style="list-style: none;border: medium none;margin: 0;padding: 0;font-size: 100%;display: block;margin-block-start: 0em;margin-block-end: 0em;margin-inline-start: 0px;margin-inline-end: 0px;padding-inline-start: 0px;">
                                  <li style="border: medium none;margin: 0;padding: 0;font-size: 100%;overflow: auto;">
                                     <div style="border-bottom: 1px dashed #404040;height: 35px;">
                                         <span id="bpgongdian1" style="width: 70%;height: 35px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;color:#ffd220;">鞍山路站</span>
                                         <span id="bptime1" style="width: 30%;height: 35px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;text-align:center;color:#ffd220;">18:07</span>
                                     </div>
                                  </li>
                                  <li style="border: medium none;margin: 0;padding: 0;font-size: 100%;overflow: auto;">
                                     <div style="border-bottom: 1px dashed #404040;height: 35px;">
                                         <span id="bpgongdian2" style="width: 70%;height: 35px;line-height: 30px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;color:#1eb6fe;">海港路站</span>
                                         <span id="bptime2" style="width: 30%;height: 35px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;text-align:center;color:#1eb6fe;">18:08</span>
                                     </div>
                                  </li>
                                  <li style="border: medium none;margin: 0;padding: 0;font-size: 100%;overflow: auto;">
                                     <div style="border-bottom: 1px dashed #404040;height: 35px;">
                                         <span id="bpgongdian3" style="width: 70%;height: 35px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;color:#ffd220;">黄海学院</span>
                                         <span id="bptime3" style="width: 30%;height: 35px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;text-align:center;color:#ffd220;">08:49</span>
                                     </div>
                                  </li>
                                  <li style="border: medium none;margin: 0;padding: 0;font-size: 100%;overflow: auto;">
                                     <div style="border-bottom: 1px dashed #404040;height: 35px;">
                                         <span id="bpgongdian4" style="width: 70%;height: 35px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;color:#1eb6fe;">江苏路车站主体及附属工程</span>
                                         <span id="bptime4" style="width: 30%;height: 30px;line-height: 35px;float: left;color: #fff;overflow: hidden;text-overflow: ellipsis;text-align:center;color:#1eb6fe;">11:12</span>
                                     </div>
                                  </li>
                              </ul>
                          </div>

                      </div>
					</div>
				</div>

				<div class="item" style="box-shadow: inset 0 0 30px #07417a;">
					<div class="itemTit">
						<span class="border-blue">人员信息</span>
					</div>
					<div class="itemCon itembg">
						<ul class="listStyle">
							<li class="clearfix">
								<span>领导：<strong>5</strong>人</span>
								<span>司机：<strong>36</strong>人</span>
								<span>爆破员：<strong>6</strong>人</span>
								<span>技术员：<strong>15</strong>人</span>
								<span>安全人员：<strong>20</strong>人</span>
								<span>其他人员：<strong>29</strong>人</span>
								<span>财务：<strong>3</strong>人</span>
								<span>驾驶员：<strong>10</strong>人</span>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="center">
				<div class="centerWp">
					<div class="mapContainer">
						<div class="btnLayer">
							<div class="search">
								<div class="searchInner">
									<a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
									<form class="searchForm">
										<button class="icoSearch"></button>
										<input type="text" name="" placeholder="请搜索车辆">
									</form>
								</div>
							</div>
							<a href="javascript:;" class="infoBtn"><span class="icoCar"></span></a>
						</div>
						<div id="myMap" class="item"></div>
					</div>

					<div class="billChart">
						<div class="itemTit">
							<span class="border-blue">全市雷管使用量统计图<small>(10月08日至10月14日)</small></span>
						</div>
						<div id="myChart1"></div>
					</div>
				</div>
			</div>

			<div class="right">
				<div class="item total itembg" style="box-shadow: inset 0 0 30px #07417a;">
					<div class="itemTit">
						<span class="border-yellow">明日施工</span>
					</div>
					<div class="itemCon">
                     <div id="sby_3" style="color: #00deff;font-family: 'tapeworm';">
                          <div style="width: 100%;height: 76px;background: url(images/ksh40.png) no-repeat;background-size: 100% 100%;">
                             <h3 style="margin: 0;padding: 0;list-style: none;font-style: normal;color: #fff;font-size: 16px;padding: 16px 0 0 20px;display: inline-block;float: left;color: #00ffc6;">地铁</h3>
                             <p id="miri_ditie" style="font-weight: normal;margin: 0;padding: 0;list-style: none;font-style: normal;color: #20dbfd;text-shadow: 0 0 25px #00d8ff;font-size: 46px;font-family: 'yjsz';display: inline-block;float: left;">23</p>
                             <h3 style="margin: 0;padding: 0;list-style: none;font-style: normal;color: #fff;font-size: 16px;padding: 16px 0 0 20px;display: inline-block;float: left;color: #ffe400">地方</h3>
                             <p id="miri_difang" style="font-weight: normal;margin: 0;padding: 0;list-style: none;font-style: normal;color: #20dbfd;text-shadow: 0 0 25px #00d8ff;font-size: 46px;font-family: 'yjsz';display: inline-block;">09</p>
                          </div>
                     </div>
                 </div>
				</div>

				<div class="item basicInfo" style="box-shadow: inset 0 0 30px #07417a;">
					<div class="itemTit">
						<span class="border-green">基本信息</span>
					</div>
					<div class="itemCon itembg">
						<div class="infoPie">
							<ul class="clearfix">
								<li class="color-yellow">
									<span class="border-yellow" id="indicator1" total="32">0</span>
									<p>在途车辆</p>
								</li>
								<li class="color-green">
									<span class="border-green" id="indicator2" total="65">0</span>
									<p>出车次数</p>
								</li>
								<li class="color-blue">
									<span class="border-blue" id="indicator3" total="100">0</span>
									<p>今日订单</p>
								</li>
							</ul>
							<div id="indicatorContainer"></div>
						</div>
					</div>
				</div>

				<div class="item billState" style="box-shadow: inset 0 0 30px #07417a;">
					<div class="itemTit">
						<span class="border-green">在建项目各区分布</span>
					</div>
					<div class="itemCon">
                        <div id="main3" style="width: 100%;height:310px;"></div>
					</div>
				</div>
			</div>
		</div>
		<!--Main End!-->
	</div>

	<div class="filterbg"></div>
	<div class="popup">
		<a href="javascript:;" class="popupClose"></a>
		<div class="summary">
			<div class="summaryTop">
				<div id="summaryPie1" class="summaryPie"></div>
				<div id="summaryPie2" class="summaryPie"></div>
				<div id="summaryPie3" class="summaryPie"></div>
			</div>
			<div class="summaryBottom">
				<div class="summaryBar">
					<div class="summaryTit">
						<img src="images/tit1.png">
					</div>
					<div id="summaryBar"></div>
				</div>

				<div class="summaryLine">
					<div class="summaryTit">
						<img src="images/tit2.png">
					</div>
					<div id="summaryLine"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="carInfo">
		<a href="javascript:;" class="carClose"></a>
		<div class="infoBox">
			<div class="infoTop">
				<div class="infoTit">
					<img src="images/tit3.png">
				</div>
			</div>
			<div class="infoMain">
				<div class="infoLeft fl">
					<div class="topSearch">
						<form>
							<button></button>
							<input type="text" name="" placeholder="请输入车牌号搜索">
						</form>
					</div>
					<div class="carState">
						<h3>
							<span class="fl">车牌号码</span>
							<span class="fr">状态</span>
						</h3>
						<ul class="stateUl">
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="work">工作</span>
							</li>
							<li>
								<p>粤A3456344</p>
								<span class="nowork">休息</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="infoRight fr">
					<div class="rightWp">
						<div class="carIntro">
							<div class="introBox fl">
								<div class="carImg fl">
									<img src="images/car.jpg">
								</div>
								<div class="carText fl clearfix">
									<p>车辆类型：大车</p>
									<p>本周工作时长：34.45小时</p>
									<p>车牌号码：粤A3456344</p>
									<p>统计时段：2018-1-12至2018-2-13</p>
									<p>可载容量：20.0方</p>
									<p>当前状态：<span class="color-green">工作</span></p>
								</div>
							</div>
							<div class="driver fr">
								<div class="photo">
									<img src="images/photo.jpg">
								</div>
								<p>司机：李思林</p>
							</div>
						</div>
						<div class="timetable">
							<div class="topTool">
								<div class="tableExplain fl">
									<div class="itemExplain fl">
										<span class="bg-green"></span>
										<p>司机工作时间</p>
									</div>
									<div class="itemExplain fl">
										<span class="bg-blue"></span>
										<p>标准白晚班时间</p>
									</div>
								</div>
								<div class="topBtns fr">
									<a href="javascript:;" class="prevWeek">上一周</a>
									<a href="javascript:;" class="nextWeek">下一周</a>
								</div>
							</div>
							<div class="tiemWp">
								<div class="timeInner">
									<div class="weekList">
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期一</p>
										</div>
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期二</p>
										</div>
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期三</p>
										</div>
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期四</p>
										</div>
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期五</p>
										</div>
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期六</p>
										</div>
										<div class="weekItem">
											<div class="space1"></div>
											<p>星期天</p>
										</div>
									</div>
									<div class="timeBox">
										<div class="dataContainer">
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
											<div class="dataBox">
												<div class="space1"></div>
												<div class="workTime"></div>
												<div class="space2"></div>
												<div class="standard"></div>
												<div class="space3"></div>
											</div>
										</div>
										<div class="timeLine line1"><span>0:00</span></div>
										<div class="timeLine line2"><span>3:00</span></div>
										<div class="timeLine line3"><span>6:00</span></div>
										<div class="timeLine line4"><span>9:00</span></div>
										<div class="timeLine line5"><span>12:00</span></div>
										<div class="timeLine line6"><span>15:00</span></div>
										<div class="timeLine line7"><span>18:00</span></div>
										<div class="timeLine line8"><span>21:00</span></div>
										<div class="timeLine line9"><span>24:00</span></div>
									</div>
								</div>
								<div class="totalTable">
									<div class="totalTit">
										<span>总用时/天</span>
										<span>总单数/天</span>
									</div>
									<div class="totalData">
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
										<div class="totalItem">
											<div class="space1"></div>
											<div class="tatleWp">
												<span>0.00</span>
												<span>0</span>
											</div>
											<div class="totalBar"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</body>
<script type="text/javascript" src="js/bg.js"></script>
<script type="text/javascript" src="js/scanboard.js"></script>
<script type="text/javascript" src="js/fontscroll.js"></script>
<script type="text/javascript" src="js/jquery.animsition.js"></script>

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=f8ffe058b8e6f5b05e8ff43ca4207393"></script>



</html>
